<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XX店铺</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=a0f6ffc91a1c9c661734a2c4e53669ab"></script>


    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }

        #container {
            width: 3.75rem;
            height: 1.04rem;
        }

        .amap-logo {
            display: none;
        }

        .amap-copyright {
            bottom: -100px;
            display: none;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">{{datas_1.storeName}}</span>
        <span class="public-header-right"></span>
    </div>

    <!--正文-->
    <div class="Shop bc-gray">
        <div class="top clearfix">
            <img :src="datas_1.storeImage" alt="">
            <div class="right">
                <p class="p1 flex">
                    <span>{{datas_1.storeName}}</span>
                    <em>VIP{{datas_1.store_level}}</em>
                    <i v-if='datas_1.storeAuthority'></i>
                </p>
                <p class="p2 flex">
                    <span>{{follow}}</span>
                    <em>{{datas_1.storeScore}}分</em>
                    <i>{{datas_1.storeAmountGuaranteed}}元</i>
                </p>
            </div>
        </div>
        <div class="hd flex">
            <a href="javascript:;" class="active">店铺首页</a>
            <a href="javascript:;" @click='load_data_2()'>即将截拍</a>
            <a href="javascript:;">全部产品</a>
        </div>
        <div class="bd">
            <div class="bd-1 bd-0 active">
                <p class="title flex">
                    <img src="../img/今日产品@2x.png" alt="">
                    <span>今日产品</span>
                </p>
                <ul class="clearfix">
                    <li v-for='item in datas_1.produce'>
                        <img :src="item.produce_head_image" alt="" style="width:100%">
                        <p class="p1">{{item.produce_describe}}</p>
                        <p class="p2 flex">
                            <span>￥:{{item.starting_price}}</span>
                            <em>{{item.produce_good_num}}</em>
                        </p>
                    </li>

                </ul>
                <p class="title flex" style='margin-top:.48rem;'>
                    <img src="../img/位置详情@2x.png" alt="">
                    <span>位置详情</span>
                </p>
                <div id="container"></div>
            </div>
            <div class="bd-2 bd-0">
                <ul class="clearfix">
                    <li v-for="item in will">
                        <div>
                            <img :src="item.produce_head_image" alt="">
                            <div class="flex time">
                                <span></span> 距截拍：
                                <em style="text-align:center;"></em> :
                                <em style="text-align:center;"></em> :
                                <em style="text-align:center;"></em>
                            </div>
                        </div>

                        <p class="p1">{{item.produce_describe}}</p>
                        <p class="p2 flex">
                            <span>￥:{{item.starting_price}}</span>
                            <em>{{item.produce_good_num}}</em>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="bd-3 bd-0">
                <ul>
                    <li v-for='item in all_produce'>
                        <img :src="item.produce_head_image" alt="">
                        <p class="bt">{{item.produce_describe}}</p>
                        <p class="tip">
                            距离结束：
                            <font>2小时37分18秒</font>
                        </p>
                    </li>
                </ul>
            </div>

        </div>
        <div class="select-button flex">
            <div onclick='javascript:window.location.href="../index.html"'>
                <img src="../img/首页@2x.png" alt="">
                <p>首页</p>
            </div>
            <div onclick='javascript:window.location.href="../faxian/faxian.html"'>
                <img src="../img/发现 02@2x.png" alt="">
                <p>发现</p>
            </div>
            <div onclick='javascript:window.location.href="../wode/my-page.html"'>
                <img src="../img/我的@2x.png" alt="">
                <p>我的</p>
            </div>
            <div class="flex">
                <img src="../img/客服@2x.png" alt="">
                <p>联系客服</p>
            </div>

        </div>
    </div>

    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>

    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            })
            let s_name = getQueryString('s_name');
            $('title').text(s_name)

        })
    </script>
    <script>
        $(function () {

            // 初始化地图
            var map = new AMap.Map('container', {
                zoom: 18,
                center: [116.39, 39.9] //new AMap.LngLat(116.39,39.9)
            });

            // 设置标记的icon
            // 设置content之后，icon的效果会被覆盖
            var icon = new AMap.Icon({
                image: '../img/小定位@2x.png', //icon可缺省，缺省时为默认的蓝色水滴图标，
                size: new AMap.Size(16, 16),
                imageSize: new AMap.Size(16, 16),
            });

            /*
             * 设置地图上显示的数字
             * 同时设置地图上的icon，不然没有显示
             */
            // var content =
            //     "<div class='tip' style='font-size:10px'><span class='red' style='color: rgba(231,59,59,1);font-size:10px'>12</span>/<span class='blank' style='font-size: 10px'>123</span></div><div><img src='img/小定位@2x.png' alt='' style='width: 20px;height: 20px;margin: 0 auto;display: block;'></div>";

            // 设置标记
            var marker = new AMap.Marker({
                // content: content,
                icon: icon, //24px*24px
                position: [116.39, 39.9], //marker所在的位置
                map: map, //创建时直接赋予map属性
            });

        })
    </script>
    <script>
        $(function () {
            function getUrlParam(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); 
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null; //返回参数值
            }
            var s_id = getUrlParam('s_id')
            new Vue({
                el: 'body',
                data: {
                    datas_1: {},
                    follow: '',
                    // 全部牌品
                    all_produce: [],

                },
                ready: function () {
                    this.$http.get(base_url+'ZITAOHUI/store', {
                        params: {
                            storeId: s_id,
                            userId: u_id
                        }
                    }).then(
                        function (response) {
                            console.log(response)
                            let all_data = response.data.extend.store;
                            all_data = all_data[0];
                            let follow = response.data.extend.isguanzhu;
                            if (follow == 1) {
                                follow = '已关注'
                            } else {
                                ollow = '未关注'
                            }
                            this.$set('follow', follow)
                            this.$set('datas_1', all_data)
                            $('title').html(all_data.storeName)

                        })


                    function formatSeconds(value) {
                        var theTime = parseInt(value); // 秒
                        var theTime1 = 0; // 分
                        var theTime2 = 0; // 小时
                        // alert(theTime);
                        if (theTime > 60) {
                            theTime1 = parseInt(theTime / 60);
                            theTime = parseInt(theTime % 60);
                        
                            if (theTime1 > 60) {
                                theTime2 = parseInt(theTime1 / 60);
                                theTime1 = parseInt(theTime1 % 60);
                            }
                        }
                        var result = "" + parseInt(theTime); + "秒"
                        if (theTime1 > 0) {
                            result = "" + parseInt(theTime1) + "分" + result;
                        }
                        if (theTime2 > 0) {
                            result = "" + parseInt(theTime2) + "小时" + result;
                        }
                        return result;
                    }

                    this.$http.get(base_url+'ZITAOHUI/findAllAu', {
                        params: {
                            storeId: s_id
                        }
                    }).then(
                        function (response) {
                            console.log(response)
                            let all_data = response.data.extend.list;

                            let new_arr = [];
                            for (let i = 0; i < all_data.length; i++) {
                                if (all_data[i] != null) {
                                    new_arr.push(all_data[i])
                                }
                            }
                            this.$set('all_produce', new_arr)
                            setInterval(function () {
                                for (let j = 0; j < new_arr.length; j++) {
                                    new_arr[j].surplusTime = new_arr[j].surplusTime - 1;
                                    let time = new_arr[j].surplusTime;

                                    $('.bd-3 li').eq(j).find('.tip font').html(
                                        formatSeconds(time));
                                }
                            }, 1000)

                        })
                },
                methods: {
                    load_data_2: function () {
                        var vm = this;

                        function formatSeconds(value) {
                            var theTime = parseInt(value);
                            var theTime1 = 0; 
                            var theTime2 = 0; 
                            // alert(theTime);
                            if (theTime > 60) {
                                theTime1 = parseInt(theTime / 60);
                                theTime = parseInt(theTime % 60);
                                // alert(theTime1+"-"+theTime);
                                if (theTime1 > 60) {
                                    theTime2 = parseInt(theTime1 / 60);
                                    theTime1 = parseInt(theTime1 % 60);
                                }
                            }
                            var result = "" + parseInt(theTime);
                            if (theTime1 > 0) {
                                result = "" + parseInt(theTime1) + ":" + result;
                            }
                            if (theTime2 > 0) {
                                result = "" + parseInt(theTime2) + ":" + result;
                            }
                            return result;
                        }

                        vm.$http.get(base_url+'ZITAOHUI/findleastAu', {
                            params: {
                                storeId: s_id
                            }
                        }).then(
                            function (response) {
                                console.log(response)
                                let all_data = response.data.extend.list;
                                let all_data_length = all_data.length;
                                let array = [];
                                for (let i = 0; i < all_data_length; i++) {
                                    if (all_data[i] != null) {
                                        all_data[i].surplusTime = Math.abs(all_data[i].surplusTime);
                                        array.push(all_data[i])
                                    }
                                }


                                setInterval(function () {
                                    for (let j = 0; j < array.length; j++) {
                                        array[j].surplusTime = array[j].surplusTime - 1
                                        // console.log(formatSeconds(array[j].surplusTime))
                                        let time = formatSeconds(array[j].surplusTime).split(
                                            ':');

                                        $('.bd-2 li').eq(j).find('.time em').eq(0).html(
                                            time[0])
                                        $('.bd-2 li').eq(j).find('.time em').eq(1).html(
                                            time[1])
                                        $('.bd-2 li').eq(j).find('.time em').eq(2).html(
                                            time[2])
                                            // console.log($('.bd-2 li').eq(j).find('.time em'))



                                    }
                                }, 1000)



                                console.log(array);
                                vm.$set('will', array)
                                console.log(this.will)

                            })
                    }
                },

                console: function (t) {
                    console.log(t)
                }


            })
        })
    </script>
</body>

</html>